<template>
  <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
    <div class="content_wrap">
      <el-form ref="ruleForm" :model="dataForm" label-width="100px">
        <el-form-item label="产品名称">
          <el-input v-model="dataForm.productName" readonly />
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="dataForm.brandName" readonly />
        </el-form-item>
        <el-form-item label="产品分类">
          <el-input v-model="dataForm.productCategoryName" readonly />
        </el-form-item>
        <el-form-item label="产品参数" class="detail_wrap" :style="toggleStyle" :key="1" v-if="dataForm.detailsList && dataForm.detailsList.length > 0">
          <div class="detail" v-for="(item, index) in dataForm.detailsList" :key="item.productDetailsId">
            <el-input v-model="item.detailsMenuName" clearable readonly style="width:23%" ></el-input>
            <el-input type="textarea" readonly :rows="3" clearable v-model="item.detailValue"></el-input>
          </div>
        </el-form-item>
        <el-form-item v-if="dataForm.detailsList && dataForm.detailsList.length > 0">
          <p class="toggle" @click="handleToggle" v-if="dataForm.detailsList.length > 6" >
            <span v-if="toggleFlag">收起</span>
            <span v-else>展开</span>
          </p>
        </el-form-item>
        <el-form-item label="产品价格" class="price_wrap" :key="2">
          <div class="price" v-for="(item,index) in dict.type.user_level" :key="index">
            <span>{{ item.label }}</span>
            <el-input v-model="item.raw.dictValue" readonly clearable style="width:20%" ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="产品详情">
          <el-input type="textarea" v-model="dataForm.productInfo" readonly :autosize="{ minRows: 7, maxRows: 5}" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="dataForm.isShow">
            <el-radio
              v-for="dict in dict.type.is_show"
              :key="dict.value"
              :label="dict.value"
              disabled
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品图片">
          <ImageUpload :value="dataForm.imgUrl ? imgUrl + dataForm.imgUrl : dataForm.imgUrl" :disabled="true" />
        </el-form-item>
        <!-- 审核原因 -->
         <el-form-item label="审核原因">
          <el-input type="textarea" v-model="dataForm.auditReason" :autosize="{ minRows: 3, maxRows: 5}" :readonly="disabledFun" placeholder="请输入产品审核原因" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="!disabledFun" @click="submitForm(1)">通过</el-button>
      <el-button type="primary" v-if="!disabledFun" @click="submitForm(2)">不通过</el-button>
      <el-button v-else type="info" >{{ dataForm.auditStatus == 2 ? '未 通 过' : dataForm.auditStatus == 1 ? '已 通 过' : '审 核'}}</el-button>
      <el-button @click="open = false;">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getAuditInfo, auditProduct } from "@/api/product";

export default {
  name: "productAdd",
  dicts: ['is_show', 'user_level'],
  computed: {
    toggleStyle () {
      let length = this.dataForm.detailsList.length
      let height = null
      if (length < 3) {
        height = '120px'
      } else if (length < 5) {
        height = '200px'
      } else {
        height = '284px'
      }
      return this.toggleFlag ? 'height:auto' : `height:${height}`
    },
    // 判断是否可编辑
    disabledFun () {
      // 0 是待审核 1是已通过 2是未通过
      return this.dataForm.auditStatus ? true : false
    }
  },
  data () {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      dataForm: {},
      toggleFlag: false
    }
  },
  methods: {
    init (e) {
      this.open = true;
      this.title = "审核产品";
      this.dataForm.productId = e || undefined
      this.handleUpdate(e)
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      getAuditInfo(row).then(res => {
        const { code, data, msg } = res
        if (code != 200) return this.$modal.msgError(msg);
        this.dataForm = { ...data }
        // 产品价格数据回显
        data.priceList.forEach(element => {
          this.dict.type.user_level.forEach(el => {
            if (element.userLevelLabel == el.label) el.raw.dictValue = element.price
          })
        })
        this.dataForm.isShow = data.isShow + ''
      });
    },
    /** 提交按钮 */
    submitForm (auditStatus) {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$modal.confirm(`是否确认审核该数据为${auditStatus == 1 ? '通过' : '不通过'}`).then(res => {
            const { auditReason, productId, auditId } = this.dataForm
            auditProduct({ auditReason, auditStatus, productId, auditId }).then(res => {
              const { code, msg } = res
              if (code !== 200) return this.$modal.msgError(msg);
              this.$modal.msgSuccess("审核成功")
              this.open = false;
              this.$emit('eventUpdata')
            })
          })
        }
      });
    },
    handleToggle () {
      this.toggleFlag = !this.toggleFlag
    }
  }
}
</script>
<style lang="scss" scoped>
.content_wrap {
  // width: 100%;
}
::v-deep .el-dialog__body {
  height: 700px;
  overflow-y: auto;
}

.detail {
  min-width: 50%;
  display: flex;
  margin-bottom: 20px;
  .el-input {
    height: 36px;
  }
  .el-textarea {
    width: 60%;
    margin: 0 10px;
  }
  .el-button {
    height: 36px;
  }
}
.detail_wrap {
  margin-bottom: 0;
  overflow: hidden;
  transition-duration: 0.25s, 1s;
  ::v-deep .el-form-item__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.detail_add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 0 20px;
  .el-button--medium {
    width: 40%;
  }
}
.toggle {
  margin: 0;
  padding: 0;
  span {
    color: #46a6ff;
    cursor: pointer;
  }
}

.price_wrap {
  ::v-deep .el-form-item__content {
    display: flex;
    flex-direction: column;
    .price {
      margin-bottom: 10px;
      span {
        width: 110px;
        display: inline-block;
      }
      span.el-input--suffix {
        margin-left: 100px;
      }
    }
  }
}
</style>
